<script setup>
import { defineEmits, ref, watch } from 'vue'
import SettingNavi from '@/components/attendanceComponents/SettingPage/SettingNavi.vue'
import GroupSetting from '@/components/attendanceComponents/SettingPage/GroupSetting/index.vue'

//0->设置页面 1->上班打卡提醒 2->下班打卡提醒
const pageFlag = ref(0)

const shangbanText = ref('')
const shangbanArray = ref(['上班前30分钟', '上班前10分钟', '上班前5分钟'])
const shangbanIndex = ref(0)

const xiabanText = ref('')
const xiabanArray = ref(['下班前30分钟', '下班前10分钟', '下班前5分钟'])
const xiabanIndex = ref(0)

const enterShangban = () => {
  pageFlag.value = 1
}

const enterXiaban = () => {
  pageFlag.value = 2
}

const changeShangban = (e) => {
  shangbanIndex.value = e.detail.value
  shangbanText.value = shangbanArray.value[e.detail.value]
}
const changeXiaban = (e) => {
  xiabanIndex.value = e.detail.value
  xiabanText.value = xiabanArray.value[e.detail.value]
}

const resetPageIndex = () => {
  if (pageFlag.value == 0) {
    uni.navigateBack()
  } else {
    pageFlag.value = 0
  }
}

const shangbanSetting = ref([])
const xiabanSetting = ref([])

watch(shangbanSetting, (val) => {
  console.log(val, 'shangbanSetting')
})

watch(xiabanSetting, (val) => {
  console.log(val, 'xiabanSetting')
})

const popup1 = ref(null)
const popup2 = ref(null)
const handlePopup1 = () => {
  popup1.value.open()
}
const handlePopup2 = () => {
  popup2.value.open()
}

const list = ['个人设置', '团队设置']
const current = ref(0)
const change = (index) => {
  current.value = index
}

const titleText = ref('设置')
watch(pageFlag, (val) => {
  switch (val) {
    case 0:
      titleText.value = '设置'
      break
    case 1:
      titleText.value = '上班打卡提醒'
      break
    case 2:
      titleText.value = '下班打卡提醒'
      break
  }
})

const removeOriginNaviBar = ref(false)
const removeNaviBar = (val) => {
  removeOriginNaviBar.value = val
}

const emits = defineEmits(['removeBottomNaviBar'])
const removeBottomNaviBar = (val) => {
  emits('removeBottomNaviBar', val)
}
</script>

<template>
  <SettingNavi
    v-if="!removeOriginNaviBar"
    :title="titleText"
    @pageIndexChange="resetPageIndex"
  />
  <uv-subsection
    v-if="!removeOriginNaviBar"
    :current="current"
    :list="list"
    custom-item-style="height: 84rpx;"
    custom-style="height: 84rpx; width: 100%; padding: 0; margin: 0;"
    font-size="32rpx"
    active-color="#165DFF"
    @change="change"
  ></uv-subsection>
  <!--  个人设置-->
  <view v-if="current === 0">
    <!--  设置页面-->
    <view v-if="pageFlag === 0">
      <!--    <SettingNavi-->
      <!--      :iconFont="'icon-shuaxin'"-->
      <!--      title="设置"-->
      <!--      @pageIndexChange="resetPageIndex"-->
      <!--    />-->
      <view class="container">
        <view class="sectionClass">
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="上班打卡提醒" @click="enterShangban">
            <template v-slot:right>
              <view class="textClass">
                <text>{{ shangbanText }} <i class="iconfont icon-youjiantou"></i></text>
              </view>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="下班打卡提醒" @click="enterXiaban">
            <template v-slot:right>
              <view class="textClass">
                <text>{{ xiabanText }} <i class="iconfont icon-youjiantou"></i></text>
              </view>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" sub-title="开启后，打卡异常时将与次日通过应用提醒" title="异常提醒">
            <template v-slot:right>
              <switch :checked="false" :disabled="true"/>
            </template>
          </uni-section>
        </view>
        <view class="sectionClass">
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" sub-title="到达上班地点后，打开应用即自动打卡" title="上班自动打卡">
            <template v-slot:right>
              <switch :checked="true" disabled/>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" sub-title="离开上班地点前，打开应用即自动打卡" title="下班自动打卡">
            <template v-slot:right>
              <switch :checked="true" disabled/>
            </template>
          </uni-section>
        </view>
        <view class="sectionClass">
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="周考勤统计消息">
            <template v-slot:right>
              <switch :checked="false" :disabled="true"/>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="月考勤统计消息">
            <template v-slot:right>
              <switch :checked="false" :disabled="true"/>
            </template>
          </uni-section>
        </view>
      </view>
    </view>
    <!-- 上班打卡提醒-->
    <view v-if="pageFlag === 1">
      <!--    <SettingNavi-->
      <!--      :iconFont="'icon-shuaxin'"-->
      <!--      title="上班打卡提醒"-->
      <!--      @pageIndexChange="resetPageIndex"-->
      <!--    />-->
      <view class="container">
        <view class="sectionClass">
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="提醒时间">
            <template v-slot:right>
              <view class="textClass">
                <picker :range="shangbanArray" :value="shangbanIndex" @change="changeShangban">
                  <view
                    >{{ shangbanArray[shangbanIndex] }}<i class="iconfont icon-youjiantou"></i
                  ></view>
                </picker>
              </view>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="提醒方式" @click="handlePopup1">
            <template v-slot:right>
              <view class="textClass">
                <uni-popup ref="popup1" class="popupClass" type="bottom">
                  <uv-checkbox-group v-model="shangbanSetting" shape="circle">
                    <view style="width: 100%">
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" sub-title="应用内提醒，需要打开应用通知权限" title="应用提醒">
                        <template v-slot:right>
                          <uv-checkbox name="1" />
                        </template>
                      </uni-section>
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx"
                        sub-title="通过微信公众号提醒，需要关注公众号“某某某某某某”"
                        title="微信提醒"
                      >
                        <template v-slot:right>
                          <uv-checkbox name="2" />
                        </template>
                      </uni-section>
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx"
                        sub-title="通过发送短信提醒，短信将发送至您绑定的手机号"
                        title="短信提醒"
                      >
                        <template v-slot:right>
                          <uv-checkbox name="3" />
                        </template>
                      </uni-section>
                      <view class="blankClass"></view>
                      <text class="buttonClass" @tap="popup1.close">确定</text>
                    </view>
                  </uv-checkbox-group>
                </uni-popup>
              </view>
            </template>
          </uni-section>
        </view>
      </view>
    </view>
    <!-- 下班打卡提醒-->
    <view v-if="pageFlag === 2">
      <!--    <SettingNavi-->
      <!--      :iconFont="'icon-shuaxin'"-->
      <!--      title="下班打卡提醒"-->
      <!--      @pageIndexChange="resetPageIndex"-->
      <!--    />-->
      <view class="container">
        <view class="sectionClass">
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="下班打卡提醒">
            <template v-slot:right>
              <view class="textClass">
                <picker :range="xiabanArray" :value="xiabanIndex" @change="changeXiaban">
                  <view
                    >{{ xiabanArray[xiabanIndex] }}<i class="iconfont icon-youjiantou"></i
                  ></view>
                </picker>
              </view>
            </template>
          </uni-section>
          <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" title="提醒方式" @click="handlePopup2">
            <template v-slot:right>
              <view class="textClass">
                <uni-popup ref="popup2" class="popupClass" type="bottom">
                  <uv-checkbox-group v-model="xiabanSetting" shape="circle">
                    <view style="width: 100%">
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx" sub-title="应用内提醒，需要打开应用通知权限" title="应用提醒">
                        <template v-slot:right>
                          <uv-checkbox name="1" />
                        </template>
                      </uni-section>
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx"
                        sub-title="通过微信公众号提醒，需要关注公众号“某某某某某某”"
                        title="微信提醒"
                      >
                        <template v-slot:right>
                          <uv-checkbox name="2" />
                        </template>
                      </uni-section>
                      <uni-section title-font-size="32rpx" sub-title-font-size="24rpx"
                        sub-title="通过发送短信提醒，短信将发送至您绑定的手机号"
                        title="短信提醒"
                      >
                        <template v-slot:right>
                          <uv-checkbox name="3" />
                        </template>
                      </uni-section>
                      <view class="blankClass"></view>
                      <text class="buttonClass" @tap="popup2.close">确定</text>
                    </view>
                  </uv-checkbox-group>
                </uni-popup>
              </view>
            </template>
          </uni-section>
        </view>
      </view>
    </view>
  </view>
  <!--  团队设置-->
  <view v-if="current === 1">
    <GroupSetting @removeBottomNaviBar="removeBottomNaviBar" @removeNaviBar="removeNaviBar" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  margin: 40rpx 32rpx 0rpx 32rpx;
}

:deep(.uni-switch-input-checked) {
  background-color: #165dff !important;
}

.textClass {
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}

.sectionClass {
  border-radius: 16rpx;
  margin-top: 32rpx;
  overflow: hidden;
}

.popupClass {
  background-color: #ffffff;
  //height: 1556rpx;
  width: 100%;
}

.blankClass {
  display: block;
  height: 16rpx;
  background-color: #e5e6eb;
}

.buttonClass {
  display: flex;
  padding: 32rpx;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  background: var(---white, #fff);
  color: #1d2129;
}

:deep(.uv-subsection__item) {
  background-color: #ffffff;
}
</style>
